{extend name="public/layout"}
{block name="title"}潜水活动{/block}
{block name="head"}
<style>
    html, body {
        background-color: #f6f6f6;
    }

    .panels {
        text-align: center;
    }

    .panels > .panel {
        display: inline-block;
        margin-top: 0.2rem;
        width: 6.90rem;
        height: 2.55rem;
        padding-left: 0.384rem;
        padding-right: 0.384rem;
        background: url('/images/banners/coupon.png') no-repeat center center;
        background-size: cover;
        text-align: left;
        padding-top: 0.4rem;
    }

    .panel b {
        font-size: 1.0272000000000001rem;
    }

    .panel .title {
        font-size: 0.4224rem;
    }

    .panel .title2 {
        padding-top: 0.16rem;
    }

    .small {
        padding-top: 0.5rem;
        font-size: 0.2112rem;
    }
    .dialog-wrapper{
        position: fixed;
        left:0;
        right:0;
        bottom:0;
        top:0;
        background-color: rgba(0,0,0,0.5);
    }
    .dialog{
        width:5.68rem;
        border:1px solid #eee;
        position: fixed;
        left:50%;
        margin-left:-2.84rem;
        border-radius: 0.1rem;
        top:2.14rem;
    }
    .dialog-title{
        height: 0.99rem;
        background-color: #d3f1ff;
        color:#0a92c4;
        text-align: center;
        font-size:0.36rem;
        font-weight: bold;
        line-height: 0.99rem;
    }
    .dialog-icon-close{
        position: absolute;
        border:1px solid #eee;
        border-radius: 50%;
        top:-0.18rem;
        right:-0.18rem;
        height:0.36rem;
        text-align: center;
        line-height: 0.26rem;
        width:0.36rem;
        font-size:0.36rem;
        display: block;
        background-color: #fff;
        color:#8a8a84;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .dialog-content{
        font-size:0.24rem;
        background-color: #fff;
        padding: 0.4rem 0.4rem 0.1rem 0.4rem;
        color:#4c4c4c;
    }
    .dialog .btn-rounded{
        margin-top:0.6rem;
        margin-bottom:0.4rem;
        border-radius: .2rem;
    }
    .dialog .btn-block{
        font-size:0.24rem;
        height: 0.68rem;
        line-height: 0.68rem;
    }
    .panels > .panel.disabled{
        background-color: #eee;
    }
    .disabled .text-primary{
        color:#ccc;
    }
    .disabled .text-gray{
        color:#ccc;
    }
</style>
{/block}
{block name="content"}
<div>
    <div class="panels" id="list">
        {volist name="m" id="vo"}
        <a class="panel {$vo.status==1?'disabled':''}" href="{if $vo.status eq 0}{:U('apply',['id'=>$vo.id])}{else/}javascript:void(0){/if}">
            <div class="flex text-primary">
                <div class="flex-con">
                    <div class="title">活动劵</div>
                    <div class="title2 h0">珊瑚种植保育潜水活动</div>
                </div>
                <div>
                    <b>{$vo.man_num}</b>
                    <span class="h0">
                    人
                </span>
                </div>
            </div>
            <div class="small text-gray">领卷日期 {$vo.create_time}</div>
        </a>
        {/volist}
    </div>
</div>

<div class="btn-block-area">
    <a class="btn-primary btn-block dock-bottom" href="tel:{:ccnn_sys_setting('客服电话')}">
        联系工作人员
    </a>
</div>
<script type="text/html" id="template">
    {{#for(var i=0,len=d.data.length; i < len ; i++){}}
    <a class="panel {{d.data[i].status==1?'disabled':''}}"  {{#if(d.data[i].status == 1)}}href="javascript:void(0)"{{#}else{}}href="{:U('apply')}?id={{d.data[i].id}}"{{#}}}>
        <div class="flex text-primary">
            <div class="flex-con">
                <div class="title">活动劵</div>
                <div class="title2 h0">珊瑚种植保育潜水培训</div>
            </div>
            <div>
                <b>{{d.data[i].man_num}}</b>
                <span class="h0">
                    人
                </span>
            </div>
        </div>
        <div class="small text-gray">领卷日期 {{d.data[i].create_time}}}</div>
    </a>
    {{#}}}
</script>
{:_js('js/loader.js')}
{:_js('static/laytpl/laytpl.js')}
<script>
    Loader.m1('list','template',"{:U('divingJSON')}");
</script>

{notempty name="apply"}
<div class="dialog-wrapper" id="dialog">
    <div class="dialog">
        <div class="dialog-icon-close" onclick="$('#dialog').hide()">+</div>
        <div class="dialog-title">
            报名成功
        </div>
        <div class="dialog-content">
            你的权利信息我们已完成统计，我们将不定期举行活动，届时工作人员将和您联系。如您对此有疑问，可与我们联系！
            <div class="btn btn-block btn-rounded btn-primary" onclick="$('#dialog').hide()">确认</div>
        </div>
    </div>
</div>

{/notempty}

{/block}


